<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="box flex-row-center">
		<template v-if="clerkList.list.length>0">
			<view class="personnel-box W100" v-for="(item,index) in clerkList.list" :key="item.id">
				<!-- 内容 -->
				<view class="personnel-content flex-row-center W100">
					<view class="personnel-left">
						<image :src="item.avatar" v-if="item.avatar" class="ava" mode="aspectFill"></image>
						<up-avatar :text="item.fristName" v-else fontSize="36rpx" randomBgColor></up-avatar>
					</view>
					<view class="personnel-right">
						<view class="personnel-head flex-row-center">
							<view class="name-box flex-row-center">
								<text class="name">{{item.sereal_name}}</text>
								<view class="info-lv" v-if="item.levelName">
									<text class="tag">{{item.levelName}}助教</text>
								</view>
							</view>
							<view class="status-box flex-center">
								<text class="phone" v-if="item.newSemobile">{{item.newSemobile}}</text>
								<text class="phone" v-else>{{item.semobile}}</text>
							</view>
						</view>
						<view class="personnel-footer flex-row-center">
							<text class="text">发布组队：{{item.is_group===1?'是':'否'}}</text>
							<text class="text">是否核销：{{item.is_write===1?'是':'否'}}</text>
						</view>
					</view>
				</view>
				<!-- 操作 -->
				<view class="option-box flex-row-center">
					<view class="option-btn flex-center borderR" @click.stop="delItem(item.id)">
						<text class="text">删除</text>
					</view>
					<view class="option-btn flex-center" @click.stop="alterClerk(item)">
						<text class="writeOff-text">编辑</text>
					</view>
				</view>
			</view>
			<view class="view-more" @click="getMoreClerkList">
				<up-loadmore :status="clerkList.status" />
			</view>
		</template>
		<view class="not-list-view" v-else>
			<text class="text">该门店暂时没有添加店员~</text>
		</view>
		<view class="add-box flex-center" @click="()=>addShow=true">
			<up-icon name="plus" color="#0A534F" size="28rpx"></up-icon>
			<text class="text">新增店员</text>
		</view>
	</view>
	<!-- 弹出组队 -->
	<up-popup :show="addShow" @close="closeAddShow" round="18rpx" closeable mode="bottom" :closeOnClickOverlay="false">
		<addEmployeeVue @closeAddShow="closeAddShow" :storeId="storeId" :clerkInfo="clerkInfo"></addEmployeeVue>
	</up-popup>
</template>

<script setup>
	import addEmployeeVue from '../components/addEmployee.vue';
	import {
		maskPhoneNumber
	} from '@/utils/utools';
	import {
		userInfoStore
	} from '@/stores/user';
	const addShow = ref(false);
	const signlist = ref([]);
	const storeId = ref(0);
	const clerkInfo = ref(null);
	const userStore = userInfoStore();
	const levelInfo = ref(computed(() => userStore.level_info))
	const clerkList = reactive({
		list: [],
		status: 'loadmore',
		pageSize: 1
	});
	onLoad((option) => {
		if (option.storeId) {
			storeId.value = option.storeId;
			getClerkList(option.storeId);
		}
	});
	onReachBottom(() => {
		console.log('触底le');
		getMoreClerkList();
	})
	const getMoreClerkList = () => {
		if (clerkList.status == 'loading' || clerkList.status == 'nomore') return;
		clerkList.status = 'loading';
		setTimeout(() => {
			getClerkList(storeId.value);
		}, 600)
	}
	const getClerkList = async (id) => { //获取门店店员
		const res = await $Api.store.getClerk({
			id,
			page: clerkList.pageSize
		});
		if (res.code === 1) {
			if (res.data.list.length > 0) {
				let arr = [];
				arr = res.data.list.map((val) => {
					let fristName = '北';
					let newSemobile = '';
					if (val.sereal_name) {
						fristName = val.sereal_name.charAt(0)
					}
					if (val.semobile) {
						newSemobile = maskPhoneNumber(val.semobile);
					}
					let levelName = '';
					if (val.level && val.assistant_id) {
						let info = levelInfo.value.value.find((item) => val.level == item.vl_id)
						if (info) {
							levelName = info.vip_name;
						}
					}
					return {
						...val,
						fristName,
						newSemobile,
						levelName
					}
				})
				clerkList.list = [...clerkList.list, ...arr];
			}
			// console.log('clerkList.list', clerkList.list);
			if (res.data.totalPage && res.data.totalPage > clerkList.pageSize) {
				clerkList.status = 'loadmore';
				clerkList.pageSize++;
			} else {
				clerkList.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const delItem = (id) => { //删除
		uni.showModal({
			title: '提示',
			content: '确定删除该人员？',
			success: async (res) => {
				if (res.confirm) {
					uni.showLoading({
						title: '请求中'
					});
					const res = await $Api.store.delClerk({
						id
					});
					if (res.code == 1) {
						setTimeout(() => {
							uni.hideLoading();
							uni.showToast({
								title: '删除成功！'
							})
							clerkList.list = clerkList.list.filter(val => val.id !== id);
						}, 600)
					} else {
						uni.hideLoading();
						uni.$u.toast(res.msg)
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	}
	const alterClerk = (item) => { //修改
		clerkInfo.value = item;
		addShow.value = true;
	}
	const closeAddShow = (type) => {
		addShow.value = false;
		clerkInfo.value = null;
		if (type == 1) {
			restClerkList();
		}
	}
	const restClerkList = () => {
		clerkList.list = [];
		clerkList.pageSize = 1;
		clerkList.status = 'loadmore';
		getClerkList(storeId.value);
	}
	const addShowBtn = () => {
		addShow.value = true;
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 20rpx;
		padding-bottom: 60rpx;
		flex-direction: column;
	}

	.personnel-box {
		width: 100%;
		background: #222528;
		border-radius: 20rpx;
		margin-bottom: 16rpx;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.personnel-left {
		.ava {
			width: 56rpx;
			height: 56rpx;
			border-radius: 50%;
		}
	}

	.personnel-content {
		padding: 20rpx;

		.personnel-right {
			margin-left: 24rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.personnel-head {
			width: 100%;
			justify-content: space-between;

			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: $title-color;
				margin-right: 12rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: 180rpx;
			}

			.phone {
				color: $description-color;
				font-size: 28rpx;
			}

			.info-lv {
				.tag {
					background: #ff9900;
					color: #fff;
					padding: 4rpx 10rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
				}
			}
		}

		.personnel-footer {
			width: 100%;
			justify-content: space-between;
			margin-top: 18rpx;

			.text {
				color: $description-color;
				font-size: 28rpx;
			}
		}




	}

	.status-box {
		.text {
			color: $attention-color;
			font-weight: bold;
			font-size: 28rpx;
		}
	}

	.option-box {
		width: 100%;
		border-top: 2rpx solid #2F3235;
		height: 80rpx;

		.option-btn {
			width: 50%;
			height: 100%;
			box-sizing: border-box;

			.text {
				font-weight: 500;
				font-size: 28rpx;
				color: #848687;
			}

			.writeOff-text {
				font-weight: 500;
				font-size: 28rpx;
				color: #99D19A;
			}
		}

		.borderR {
			border-right: 2rpx solid #2F3235;
		}
	}

	.add-box {
		width: 580rpx;
		height: 80rpx;
		background: $btn-bg-color;
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(108, 199, 190, 0.38);
		border-radius: 40rpx;
		margin-top: 120rpx;

		.text {
			font-weight: 800;
			font-size: 30rpx;
			color: $btn-text-color;
			margin-left: 12rpx;
		}
	}
</style>